<template>
    <div class="addPost" @click="openOfOffBar">
        <el-icon :size="30"><Edit /></el-icon>
    </div>

    <div class="addPostBar" v-show="showAddPostBar">
        <div class="bar_content">
            <div class="content_title">发表想法</div>
            <el-input
                v-model="title"
                style="max-width: 300px;margin-bottom: 1vh"
                maxlength="25"
                show-word-limit
                placeholder="请输入标题"
            >
            <template #prepend>标题</template>
            </el-input>
            <el-input
                class="content_textarea"
                v-model="textarea"
                :rows="6"
                type="textarea"
                placeholder="请输入内容"
            />
            <el-scrollbar>
                <el-upload
                    :http-request="pushIntoList"
                    multiple
                    :show-file-list="true"
                    list-type="picture-card"
                    :before-upload="judgeFileNum"
                    limit="7"
                    :on-exceed="exceedLimit"
                >
                    <el-icon><Plus /></el-icon>
                </el-upload>
            </el-scrollbar>
            <div class="submitOrNot">
                <el-button type="primary" @click="submitPostForm">发布</el-button>
                <el-button @click="openOfOffBar">取消</el-button>
            </div>
        </div>
    </div>
</template>

<script setup>
import { Edit,Plus } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { addPost } from '@/apis/post'
import { ElMessage } from "element-plus"

const showAddPostBar = ref(false)

const fileList = ref([])
const textarea = ref('')
const title = ref('')

const openOfOffBar = () => {
    showAddPostBar.value = !showAddPostBar.value
}

const pushIntoList = (files) => {
    fileList.value.push(files)
}

const judgeFileNum = (files) => {
    if(files.type != 'image/jpeg' && files.type != 'image/png' && files.type != 'image/jpg'){
        ElMessage({
            type: "error",
            message: "只能上传图片哦",
        });
        return false
    }
    return true
}

const exceedLimit = () => {
    ElMessage({
        type: "error",
        message: "最大上传7个图片哦",
    });
}

const submitPostForm = () => {
    let dataForm = new FormData();
    dataForm.append('text', textarea.value)
    dataForm.append('title', title.value)
    if(fileList.value.length > 0){
        fileList.value.forEach((postFile)=>{
            dataForm.append('files', postFile.file)
        })
    }
    
    //提交表单
    addPost(dataForm).then((res)=>{
        console.log(res)
    })
}

</script>

<style scoped>
.addPost{
    height: 80px;
    width: 80px;
    background-color: #a0cfff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
    position: fixed;
    bottom: 10vh;
    right: 10vh;
    transition: all 0.4s ease-in-out;
}
.addPost:hover{
    background-color: #ecf5ff;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.3);
    transform: scale(1.1);
}


.addPostBar{
    height: 100vh;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    position: fixed;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease-in-out;
    z-index: 10;
}
.bar_content{
    min-height: 40vh;
    width: 50%;
    background-color: #fefefe;
    border-radius: 4px;
    border: 1px solid #dddddd;
    box-shadow: 2px 2px 2px 0 rgba(0, 0, 0, 0.1);
    padding: 5vh;
    flex-direction: column;
    position: relative;
    bottom: 4vh;
}
.content_title{
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 1vh;
}
.content_textarea{
    width: 80%;
    height: 20vh;
}

.imgScroll{
    max-height: 30vh;
    width: 100%;
    width: 100%;
    position: static;
    padding: 0;
}
.submitOrNot{
    margin-top: 3vh;
}

</style>